<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2024-01-18 09:54:17
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2025-10-27 15:59:42
 * @FilePath: \vue-admin-template\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="normal-container" v-if="totalConfig">

        <div style="padding: 20px;background-color: #fff;margin:20px 0px;">
            <div class="title">
                动销管理
            </div>
            <div style=" overflow-x: auto;" class="yunyingBox">
                <div v-for="(item, index) in iconList" class="yunying">
                    <div style="font-size: 0.7vw;;color: #818391;display: flex;align-items: center;">
                        <img style="width: 12px;height: auto;margin-right: 5px;"
                            :src="require(`@/assets/icon/${item.imgName}.png`)" alt=""> {{ item.name }}
                    </div>
                    <div style="margin: 10px 0px;;font-size: 1.1vw;;color: #000;margin-left:17px;font-weight: 600;">
                        {{ totalConfig['动销管理'][item.name] }}
                    </div>

                </div>
            </div>
        </div>
        <div style="display: flex;">
            <div style="background-color: #fff;padding: 20px;width: calc(50% - 20px);margin-right: 20px;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div class="title">
                        股东单位动销分析
                    </div>
                    <div>
                        <img style="width: 90px;height: auto;cursor: pointer;" src="@/assets/icon/按钮-导出.png" alt="">
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['股东单位动销分析']" style="width: 100%"
                        height="250">
                        <el-table-column prop="shareholderUnit" label="股东名称"></el-table-column>
                        <el-table-column prop="outOfStockCategoriesNumber" label="断货品规数"></el-table-column>
                        <el-table-column prop="stockOutRate" label="断货率"></el-table-column>
                        <el-table-column prop="inventoryTurnoverDays" label="库存周转天数"></el-table-column>
                        <el-table-column prop="fixedSalesCost" label="90天不动销成本额"></el-table-column>
                        <el-table-column prop="backlogCostAmount" label="90天以上积压成本额"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;width: calc(50%);">

                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div class="title">
                        政策品执行分析
                    </div>
                    <div style="display: flex;align-items: center;">
                        <img style="width: auto;height: 35px;cursor: pointer;margin-right: 10px;"
                            src="@/assets/icon/按钮-导出.png" alt="">
                        <div @click="currentChoose = '集团'; typeData()" :style="{ 'border-radius': '5px 0px 0px 5px' }"
                            :class="currentChoose == '集团' ? 'currentChooseYes' : 'currentChoose'">
                            集团
                        </div>
                        <div @click="currentChoose = '股东单位'; typeData()" :style="{ 'border-radius': '0px 5px 5px 0px' }"
                            :class="currentChoose == '股东单位' ? 'currentChooseYes' : 'currentChoose'">
                            股东单位
                        </div>

                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <el-table v-if="currentChoose == '股东单位'" :header-cell-style="rowClass"
                        border:cell-style="{ 'text-align': 'center' }" :data="totalConfig['股东单位'].data"
                        style="width: 100%" height="250">
                        <el-table-column prop="shareholderUnit" label="股东单位"></el-table-column>
                        <el-table-column :label="item" v-for="(item, index) in totalConfig['股东单位'].keys"
                            :prop="item['yieldRate']">
                            <el-table-column :prop="item.salesMoney" width="90">
                                <template slot-scope="scope">
                                    <div style="text-align: center;"> {{ scope.row[item].salesMoney }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column :prop="item.yieldRate" width="90">
                                <template slot-scope="scope">
                                    <div style="text-align: center;"> {{ scope.row[item].yieldRate }}</div>
                                </template>
                            </el-table-column>
                        </el-table-column>



                    </el-table>
                    <el-table v-else border :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['集团']" style="width: 100%"
                        height="250">

                        <el-table-column prop="policyType" label="政策类型"></el-table-column>
                        <el-table-column prop="targetMoney" label="任务目标"></el-table-column>
                        <el-table-column prop="salesMoney" label="完成额"></el-table-column>
                        <el-table-column prop="yieldRate" label="完成率"></el-table-column>

                    </el-table>
                </div>
            </div>
        </div>
        <div style="display: flex;margin-top: 20px;">
            <div style="background-color: #fff;padding: 20px;width: calc(50% - 20px);margin-right: 20px;">

                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div class="title">
                        毛利率分析
                    </div>
                    <div>
                        <img style="width: 90px;height: auto;cursor: pointer;" src="@/assets/icon/按钮-导出.png" alt="">
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['毛利率分析']" style="width: 100%"
                        height="250">
                        <el-table-column prop="categoryName" label="主治类别"></el-table-column>
                        <el-table-column prop="lastYear" label="上年毛利率"></el-table-column>
                        <el-table-column prop="lastMonth" label="上月毛利率"></el-table-column>
                        <el-table-column prop="thisMonth" label="本月毛利率"></el-table-column>
                        <el-table-column prop="yoy" label="同比差值"></el-table-column>
                        <el-table-column prop="mom" label="环比差值"></el-table-column>

                    </el-table>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;width: calc(50%);">
                <div class="title">
                    商品动销类别占比
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsId" style="width:100%;height: 600px;"></div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
var echarts = require('echarts');

export default {
    data() {
        return {
            totalConfig: {
                "动销管理": [

                ],
                "股东单位动销分析": [],
                "股东单位": {},
                "集团": [],
                "毛利率分析": [],
                "商品动销类别占比": []
            },

            myChart: null,
            option: null,
            currentChoose: '集团',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            checkIndex: 0,
            list: ['今天', '近7日', '近30日', '自定义'],
            iconList: [
                {
                    name: '在库品规数',
                    imgName: '动销管理1-在库品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '断货品规数',
                    imgName: '动销管理2-断货品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '动销品规数',
                    imgName: '动销管理3-动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '%'

                },
                {
                    name: '不动销品规数',
                    imgName: '动销管理4-不动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '90天不动销成本额',
                    imgName: '动销管理5-90天不动销成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '人'

                },
                {
                    name: '近40天动销率',
                    imgName: '动销管理6-近40天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '近90天动销率',
                    imgName: '动销管理7-近90天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '断货损失',
                    imgName: '动销管理8-断货损失',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '90天以上积压成本额',
                    imgName: '动销管理9-90天以上积压成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '库存周转天数',
                    imgName: '动销管理10-库存周转天数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },

            ]
        }
    },
    mounted() {
        // this.totalConfig = window.PLATFROM_CONFIG.dynamicSalesManagement;

        this.typeData()
        this.getData();


    },
    methods: {
        rowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex > 0) {
                return {
                    display: 'none',
                    textAlign: 'center',
                    background: '#F6F7FB',
                    color: '#4B4B4B',
                    fontSize: '13px',
                }
            } else {
                return {
                    textAlign: 'center',
                    background: '#F6F7FB',
                    color: '#4B4B4B',
                    fontSize: '13px',
                }
            }
        },
        typeData() {
            this.$baseRequest('/on/sale/manage/policyProductAnalyse', { type: this.currentChoose == '股东单位' ? 1 : 0 }, {}, 'post').then(res => {
                this.totalConfig['股东单位'] = res.data;
                this.totalConfig['集团'] = res.data;

            })
        },
        getData() {
            this.$baseRequest('/on/sale/manage/statisticalData', {}, {}, 'post').then(res => {
                this.totalConfig['动销管理'] = res.data;
            })
            this.$baseRequest('/on/sale/manage/shareholderUnitDynamicSalesAnalysis', {}, {}, 'post').then(res => {
                this.totalConfig['股东单位动销分析'] = res.data;
            })
            this.$baseRequest('/on/sale/manage/grossMarginRateAnalysis', {}, {}, 'post').then(res => {
                this.totalConfig['毛利率分析'] = res.data;
            })
            this.$baseRequest('/on/sale/manage/categoryProportion', {}, {}, 'post').then(res => {
                this.totalConfig['商品动销类别占比'] = res.data;

                if (this.totalConfig['商品动销类别占比'].length) {
                    this.totalConfig['商品动销类别占比'].forEach(item => {
                        item.name = item.categoryName;
                        item.value = item.categoryCount;
                        item.percent = item.proportion;
                    })
                };
                this.$nextTick(res => {
                    this.getEcharts()

                })
            })

        },
        freshEchats() {
            this.myChart.resize();
        },
        getEcharts() {
            this.myChart = echarts.init(document.getElementById('echartsId'));

            var data = this.totalConfig['商品动销类别占比'];
            let colorList = [
                '#96D983', '#4FD5D7', '#96D983', '#4FD5D7', '#4FD5D7', '#4FD5D7', '#96D983'
            ]
            this.option = {
                grid: {
                    left: "5%",
                    right: "10%",
                    top: "5%",
                    bottom: "2%",
                    containLabel: true,
                },
                legend: {
                    top: '5%', // 控制 板块控制器的位置
                    right: 'center',
                    // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                    // itemWidth: 10,  // 设置宽度
                    // itemHeight: 4, // 设置高度
                    itemGap: 60, // 设置两个legend之间的间距
                    data: data.map(item => {
                        return {
                            name: item.name,
                            textStyle: {
                                color: '#2DC3FB' // 单独设置某一个图列的颜色
                            }
                        }
                    })
                },

                tooltip: {
                    trigger: "item",
                    formatter: (params) => {
                        let item = data[params.dataIndex];
                        return `${item.name} 
                         <p style="color: #4FD5D7">
                            <span style="color: #4FD5D7;margin-right:5px">●</span>品规率 <strong>${item.value}</strong>
                         </p>
                         <p style="color: #96D983"> <span style="color: #96D983;margin-right:5px">●</span>占比率 <strong>${item.percent}</strong></p>  `;
                    },
                    backgroundColor: "#fff",
                    borderColor: "#ddd",
                    borderWidth: 1,
                    padding: 8,
                    textStyle: { color: "#333", fontSize: 14 },
                    extraCssText: "box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);",
                },
                xAxis: { type: "value", show: false },
                yAxis: {
                    type: "category",
                    data: data.map((item) => item.name),
                    axisTick: { show: false },
                    axisLine: { show: false },
                    axisLabel: { fontSize: 14 },
                },
                series: [
                    {

                        type: "bar",
                        data: data.map((item, index) => {

                            return {
                                name: item.name,
                                value: item.value,
                                itemStyle: {
                                    color: colorList[index],
                                    borderRadius: [2, 2, 2, 2],
                                },
                            };
                        }),
                        barWidth: 14,
                        label: {
                            show: true,
                            fontSize: 12,
                            color: "#fff",
                            formatter: '{c}'
                        },

                    },

                ],
            };


            this.option && this.myChart.setOption(this.option, true);

            window.addEventListener("resize", this.freshEchats);
        }


    }
}
</script>
<style></style>
<style lang="scss" scoped>
.currentChooseYes {
    width: 80px;
    border: 1px solid #70DEDF;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: #E6FFFF;
    color: #70DDDF;
    cursor: pointer;
    font-size: 14px;


}

.currentChoose {
    width: 80px;
    border: 1px solid #E5E4E9;
    text-align: center;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    font-size: 14px;

}

.yunyingBox {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
    gap: 3px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.yunying {

    flex-shrink: 0;
    flex: 1;

    height: 70px;

    /* 禁止收缩 */
    // width: 100px;

    border: 1px solid #96E7E8;
    padding: 5px;
    border-radius: 5px;
    background-color: #F2FFFF;
}

.title {
    font-size: 22px;
    letter-spacing: 1px;
}

.buttonBox {
    width: 95px;
    padding: 8px 0px;
    text-align: center;
    border: 1px solid #F3F4F5;
    color: #535353;
    font-size: 15px;
    cursor: pointer;

}

.buttonBoxYes {
    cursor: pointer;

    width: 95px;
    color: #70DDDF;
    font-size: 15px;
    background-color: #E6FFFF;

    padding: 8px 0px;
    text-align: center;
    border: 1px solid #96E7E8;
}

.buttonMain :first-child {
    border-radius: 7px 0px 0px 7px;
}

.buttonMain :last-child {
    border-radius: 0px 7px 7px 0px;
}

.buttonMain {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
</style>
